﻿<!DOCTYPE html>
<html lang="en">
<nav th:replace="shop/include::shopHeader"></nav>
<body class="cms-index-index cms-home-page">
<nav th:replace="shop/include::shopTop"></nav>
  <!--special-products-->
  <div class="container">
  	<div class="row" style="height:15px;"></div>
    <div class="special-products" th:each="category:${categoryList}" th:if="${not #lists.isEmpty(category.goodsList)}">
      <div class="page-header">
        <h2 th:text="${category.title}"></h2>
      </div>
      <div class="special-products-pro">
        <div class="slider-items-products">
          <div id="special-products-slider" class="product-flexslider hidden-buttons">
            <div class="slider-items slider-width-col4">
              <div class="product-item" th:each="goods:${category.goodsList}">
                <div class="item-inner">
                  <div class="product-thumbnail">
                    <!-- 
                    <div class="icon-sale-label sale-left">Sale</div>
                    <div class="icon-new-label new-right">New</div>
                     -->
                    <div class="pr-img-area"> <a th:title="${goods.subject}" th:href="${ '/shop/detail/' +goods.id}">
                      <figure>
	                      <img class="first-img" th:src="${ '/files/' + goods.thumbnailImage}" >
	                      <img class="hover-img" th:src="${ '/files/' + goods.thumbnailImage}" >
                      </figure>
                      </a>
                      <button type="button" class="add-to-cart-mt" th:onclick="'javascript:addCart(\''+${goods.id}+'\')'">
                      	<i class="fa fa-shopping-cart"></i>
                      	<span>加入购物车</span>
                      </button>
                    </div>
                    <!-- 
                    <div class="pr-info-area">
                      <div class="pr-button">
                        <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart"></i> </a> </div>
                        <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-signal"></i> </a> </div>
                        <div class="mt-button quick-view"> <a href="quick_view.html"> <i class="fa fa-search"></i> </a> </div>
                      </div>
                    </div>
                     -->
                  </div>
                  <div class="item-info">
                    <div class="info-inner">
                      <div class="item-title"> <a th:title="${goods.subject}" th:href="${ '/shop/detail/' +goods.id}" th:text="${goods.title}"></a> </div>
                      <div class="item-content">
                        <!-- 推荐指数
                        <div class="rating">
	                        	<i class="fa fa-star"></i> 
	                        	<i class="fa fa-star"></i> 
	                        	<i class="fa fa-star-o"></i> 
	                        	<i class="fa fa-star-o"></i> 
	                        	<i class="fa fa-star-o"></i> 
                        	</div>
                        	 -->
                        <div class="item-price">
                          <div class="price-box"> 
                          	<span class="regular-price"> 
                          		<span class="price" th:text="${'￥'+ #numbers.formatDecimal(goods.salePrice * 0.01, 1, 2) }">￥125.00</span>
                          	</span>
                          	<span class="old-price" th:if="${goods.marketPrice > 0}"  th:text="${'￥'+ #numbers.formatDecimal(goods.marketPrice * 0.01, 1, 2) }"> $359.99 </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nav th:replace="shop/include::shopFooter"></nav>
<!-- End Footer --> 
<!-- JS --> 
<!-- jquery js --> 
<script type="text/javascript" src="/shop/js/jquery.min.js"></script> 
<!-- bootstrap js --> 
<script type="text/javascript" src="/shop/js/bootstrap.min.js"></script> 
<!-- owl.carousel.min js --> 
<script type="text/javascript" src="/shop/js/owl.carousel.min.js"></script> 
<!-- bxslider js --> 
<script type="text/javascript" src="/shop/js/jquery.bxslider.js"></script> 
<!-- Slider Js --> 
<script type="text/javascript" src="/shop/js/revolution-slider.js"></script> 
<!-- megamenu js --> 
<script type="text/javascript" src="/shop/js/megamenu.js"></script> 
<script type="text/javascript">
  /* <![CDATA[ */   
  var mega_menu = '0';
  /* ]]> */
  </script> 

<!-- jquery.mobile-menu js --> 
<script type="text/javascript" src="/shop/js/mobile-menu.js"></script> 

<!--jquery-ui.min js --> 
<script type="text/javascript" src="/shop/js/jquery-ui.js"></script> 

<!-- main js --> 
<script type="text/javascript" src="/shop/js/main.js"></script> 

<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>

<script type="text/javascript">
function addCart(id){
	$.ajax({
		type : "POST",
		url : "/shop/shopping_cart/add",
		data : JSON.stringify({"goodsId":id}),// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			console.log(r);
			if (r.code == 0) {
				layer.msg("购物车加入成功");
				loadShoppingCartNum();
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
function loadShoppingCartNum(){
	$.ajax({
		type : "GET",
		url : "/shop/shopping_cart/total_number",
		data : {},// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			console.log(r);
			if (r.code == 0) {
				$("#shoppingCartNum").html("共"+r.msg+"件商品");
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
loadShoppingCartNum();
</script>
</body>
</html>
